<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html,
    #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=6Ej99wrRa8eXjAYpP2Auh3eg&services=&t=20170517145936"></script>
  <title>单个标注点沿直线的轨迹运动</title>
</head>

<body>
  <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

  var myP1 = new BMap.Point(116.380967, 39.913285); //起点
  var myP2 = new BMap.Point(116.424374, 39.914668); //终点
  var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
    //offset: new BMap.Size(0, -5),    //相当于CSS精灵
    imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
  });
  var driving2 = new BMap.DrivingRoute(map, {
    renderOptions: {
      map: map,
      autoViewport: true
    }
  }); //驾车实例
  driving2.search(myP1, myP2); //显示一条公交线路

  window.run = function() {
    var driving = new BMap.DrivingRoute(map); //驾车实例
    driving.search(myP1, myP2);
    driving.setSearchCompleteCallback(function() {
      var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
      var paths = pts.length; //获得有几个点

      var carMk = new BMap.Marker(pts[0], {
        icon: myIcon
      });
      map.addOverlay(carMk);
      i = 0;

      function resetMkPoint(i) {
        carMk.setPosition(pts[i]);
        if (i < paths) {
          setTimeout(function() {
            i++;
            resetMkPoint(i);
          }, 100);
        }
      }
      setTimeout(function() {
        resetMkPoint(5);
      }, 100)

    });
  }

  setTimeout(function() {
    run();
  }, 1500);
</script>
